import React, { Component } from 'react';
import { Table  } from 'antd';
import 'antd/dist/antd.css';
import { Button } from 'antd';
import { EditOutlined } from '@ant-design/icons';
import { Descriptions } from 'antd';

class NewClassTable extends Component {
    constructor(props) {
        super(props);
        this.query = this.props.location.query;//传入的参数
        //测试数据,防止每次刷新都无数据导致报错
        if(!this.query){
            this.query = {
                "_id": "5f4e1e3102e91822e86f38da",
                "courseid": "2.1",
                "coursenumber": "2",
                "coursekind": "必修课",
                "coursename": "软件详细设计",
                "teachernumber": "1",
                "assessmentmethod": "考试",
                "classlist": {
                    "2017240206":0,
                    "2017240207":0,
                },
                "term": "2020-2021第一学期",
                "gradepecents": null
            }
            console.log('当前NewClassTable组件使用的是测试数据')
        }

        this.tableData = [];

        for(let key in this.query.classlist){
            this.tableData.push({
                classnumber:key,
                status:this.query.classlist[key],
            })
        }
        //状态对照表
        this.statusMap={
            0: '未录入',
            1: '已录入',
            2: '暂存'
        }

        this.state = {
            term:this.query.term,
            coursename:this.query.coursename,
            data:this.tableData,
            //如果已经设置了唯一的 dataIndex，可以忽略key这个属性
            columns: [{
                title: '班级',
                dataIndex: 'classnumber',
                key:'classnumber'
              },{
                title: '录入状态',
                dataIndex: 'status',
                key:'status',
                render:(text)=>this.statusMap[text],//映射为文字
                
              },{
                title: '操作',
                dataIndex: 'action',
                key:'action',
                render:(text,record)=>
                <Button
                    type='primary'
                    shape='round'
                    icon={<EditOutlined />}
                    onClick={(e)=>this.handleInputBtnClick(e,record.classnumber)}
                >
                    录入成绩
                </Button>
              },
            ],
            
        }
    }

    /**
     * 处理“录入成绩”按钮点击事件
     * @param {班级号} classes 
     */
    handleInputBtnClick = (event,classnumber)=>{
        console.log(classnumber);
        let data={
            classnumber:classnumber,
        }
        Object.assign(data,this.query);//将本身的数据传入
        //路由跳转
        this.props.history.push({
            pathname:'/NewStudentTable',
            query:data
        });

    }



    render() { 
        return ( 
            <div>
            <Descriptions title="选择班级">
                <Descriptions.Item label="学期">{this.state.term}</Descriptions.Item>
                <Descriptions.Item label="课程">{this.state.coursename}</Descriptions.Item>
            </Descriptions>
            <Table 
                columns={this.state.columns} 
                dataSource={this.state.data} 
                rowKey={(record)=>record.classnumber}//使用班级号作为行key
                />
            </div>
         );
    }
}
 
export default NewClassTable;